<template>
	<view>
		<view class="container">
			<!-- v-if后要判断布尔值 而对象转为布尔值都是true 这样判断不了 只能转换为字符串在判断是否是空对象 -->
		  <view class="address-top" v-if="JSON.stringify(address) == '{}'">
		   <button type="primary" size="default" @click="getAddressInfo">请选择收货地址+</button>
		  </view>
		  <view class="address-bottom" v-else>
		   <view class="top">
		    <view class="username">
		     收货人:<text>{{address.userName}}</text>
		    </view>
		    <view class="phone">
		     电话：<text>{{address.telNumber}}</text><uni-icons type="right" size="14"></uni-icons>
		    </view>
		   </view>
		   <view class="bottom">
		    收货地址：<text>{{addressString}}</text>
		   </view>
		  </view>
		  <image src="/static/cart_border@2x.png" mode=""></image>
		 </view>
	</view>
</template>

<script>
	import {mapMutations,mapState} from 'vuex';
	export default {
		name:"car-address",
		data() {
			return {};
		},
		onLoad(){},
		methods:{
			// 展开users模块内的 updateAddress方法
			...mapMutations('users',['updateAddress']),
			async getAddressInfo(){
				const [err,success] = await uni.chooseAddress().catch(err=>err);
				if(err === null && success.errMsg == 'chooseAddress:ok'){
					this.updateAddress(success);
				}else{
					return uni.$showMsg();
				}
				console.log(success);
				/*
				cityName: "广州市"
				countyName: "海珠区"
				detailInfo: "新港中路397号"
				errMsg: "chooseAddress:ok"
				nationalCode: "510000"
				postalCode: "510000"
				provinceName: "广东省"
				telNumber: "020-81167888"
				userName: "张三"
				*/
			}
		},
		computed:{
			// 展开users模块内的 address
			...mapState('users',['address']),
			addressString(){
				return this.address.provinceName + this.address.cityName + this.address.countyName + this.address.detailInfo
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
 width: 100%;
 // height: 500rpx;;
 .address-top{
  width: 100%;
  height: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  button{
   font-size: 36rpx;
  }
 }
 .address-bottom{
  width: 100%;
  font-size: 36rpx;
  padding: 40rpx 0;
  .top{
   line-height: 80rpx;
   display: flex;
   justify-content: space-between;
   .phone{
    display: flex;
    justify-content: center;
    align-items: center;
   }
  }
  .bottom{
   line-height: 80rpx;
   text-align: left;
  }
 }
 image{
  width: 100%;
  height:10rpx;
  display: block;
 }
}
</style>
